<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理系统</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
    <b style="color: hotpink; font-size: 20px;">用户列表</b>
    <div style="float: right;">
        <el-button type="primary" @click="showAddStu">添加用户</el-button>
    </div>
    <el-table :data="tableData">
        <el-table-column prop="uuid" label="编号" width="120">
        </el-table-column>
        <el-table-column prop="userName" label="昵称" width="120">
        </el-table-column>
        <el-table-column prop="realName" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="120">
        </el-table-column>
        <el-table-column prop="birthday" label="生日" >
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="props">
              <el-button type="warning" @click="showEditStu(props.row)">编辑</el-button>
              <el-button type="danger" @click="deleteStu(props.row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>

    <!--
        分页组件
          @size-change： 当改变每页条数时触发的函数
          @current-change：当改变页码时触发的函数
          current-page ：默认的页码
          :page-sizes：每页条数选择框中显示的值
          :page-size : 默认的每页条数
          layout： 分页组件的布局
              total（总条数）, sizes(每页条数), prev（上一页）, pager(所有的页码), next(下一页), jumper（跳转页码）
          :total: 总条数
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[3,5,8]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>

    <el-dialog title="添加学生信息" :visible.sync="dialogTableVisible4add" @close="resetForm('addForm')">
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="formData" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号" prop="number">
                <el-input v-model="formData.number"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday">
                <!--v-model : 双向绑定 -->
                <el-input v-model="formData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址" prop="address">
                <el-input v-model="formData.address"></el-input>
            </el-form-item>
            <el-form-item align="right">
                <el-button type="primary" @click="addStu()">添加</el-button>
                <el-button @click="resetForm('addForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <el-dialog title="编辑学生信息" :visible.sync="dialogTableVisible4edit" @close="resetForm('editForm')" >
        <!--
            :model="formData": 关联数据
            :rules: 关联校验规则
            ref： 在获取表单对象时使用
        -->
        <el-form :model="editFormData" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="学生学号" prop="number">
                <el-input v-model="editFormData.number" readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名" prop="name">
                <el-input v-model="editFormData.name"></el-input>
            </el-form-item>
            <el-form-item label="学生生日" prop="birthday">
                <!--v-model : 双向绑定 -->
                <el-input v-model="editFormData.birthday" type="date"></el-input>
            </el-form-item>
            <el-form-item label="学生地址" prop="address">
                <el-input v-model="editFormData.address"></el-input>
            </el-form-item>

            <el-form-item align="right">
                <el-button type="warning" @click="updateStu()">修改</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            dialogTableVisible4add: false,  //添加窗口显示状态
            dialogTableVisible4edit: false, //编辑窗口显示状态
            formData:{},//添加表单的数据
            editFormData: {},//编辑表单的数据
            tableData:[],//表格数据
            pagination: {
                currentPage: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            rules: {
                number: [
                    {required: true, message: '请输入学号', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                ],
                birthday: [
                    {required: true, message: '请选择日期', trigger: 'change'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'},
                    {min: 2, max: 200, message: '长度在 2 到 200 个字符', trigger: 'blur'}
                ],
            }
        },
        methods:{

            //1.7执行删除功能
            deleteStu(row){
                //提示用户是否删除
                let result = confirm("您确定要删除吗(⊙o⊙)？");
                if (result==true){
                    //如果确认则发送ajax请求
                    //发送ajax请求
                    axios.delete("/user/"+row.uuid).then(response=>{
                        //删除完后重新分页
                        this.pageQuery();
                })
                }

            },


            //1.6执行修改功能
            updateStu(){
                //发送ajax请求执行修改功能
                axios.post("/StudentServlet","op=updateStudent&number="+this.editFormData.number+"&name="+this.editFormData.name+"&birthday="+this.editFormData.birthday+"&address="+this.editFormData.address).then(response=>{
                    //添加完成之后再次调用分页查询
                    this.pageQuery();
                //分页查询完毕之后将修改窗口关闭
                this.dialogTableVisible4edit = false;
            })
            },
            //1.5显示编辑窗口
            showEditStu(row){
                //数据回显
                this.editFormData = row;
                this.dialogTableVisible4edit = true;
            },


            //1.4执行添加功能
            addStu(){
              //发送ajax请求执行添加功能
              axios.post("/StudentServlet","op=addStudent&number="+this.formData.number+"&name="+this.formData.name+"&birthday="+this.formData.birthday+"&address="+this.formData.address).then(response=>{
                    //添加完成之后再次调用分页查询
                  this.pageQuery();
                  //分页查询完毕之后将添加窗口关闭
                this.dialogTableVisible4add = false;
            })
            },

            //1.3显示添加窗口
            showAddStu(){
                //清空数据
                this.formData = {};
                //显示添加窗口
                this.dialogTableVisible4add = true;
            },
            //1.2当分页导航切换时触发
            handleCurrentChange(cur){
                //1.2.1修改当前页
                this.pagination.currentPage= cur;
                //1.2.2调用分页查询
                this.pageQuery();
            },
            //1.3当每页显示条数切换时触发
            handleSizeChange(ps){
                //1.3.1修改m每页显示条数
                this.pagination.pageSize = ps;
                //1.3.2调用分页查询
                this.pageQuery();
            },
            //1.分页查询(将该方法封装，便于多次调用)
            pageQuery(){
                //当vue对象创建完毕后立即发送axiox请求
                axios.get("/user/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then(response=>{
                    //将后台响应的pageInfo的total属性赋值给pagination的total属性
                    //将后台响应的list属性赋值给tableData
                    //前一个.data是获取Result集合，再.data的话就是通过Result获取的user集合，可以通过debug查看！！！！！！！！！
                    this.pagination.total = response.data.data.total;
                    this.tableData = response.data.data.list;
            })
            }
        },
        mounted(){
            //1.1分页查询
            this.pageQuery()
        }
    });
</script>
</html>